<script setup lang='ts'>
import { defineProps } from 'vue';
import componentstable from "./components/table/componentstable.vue"

import organizationtabledrawer from "./components/drawer/organizationtabledrawer.vue"
import Userlisttabledrawer from "./components/drawer/Userlisttabledrawer.vue"
import Roletabledrawer from "./components/drawer/Roletabledrawer.vue"
import Menutabledrawer from "./components/drawer/Menutabledrawer.vue"
import Hospitaltabledrawer from "./components/drawer/Hospitaltabledrawer.vue"
defineOptions({
  name: 'functiontable'
})
// 弹出层默认状态
const changedrawer = ref(false)
//动态子组件
const tabs = {
  organizationtabledrawer,
  Userlisttabledrawer,
  Roletabledrawer,
  Menutabledrawer,
  Hospitaltabledrawer
}
const componentname = ref("")
const props = defineProps<{ tabletitle: { name: string, istable: string,search: string } }>();
//接受传过来的标题，表格信息
const tabletitle = ref(props.tabletitle);
const someData = ref({
  state:'',
  data: {}
})
//弹出层
componentname.value = `${tabletitle.value.istable}drawer`
//控制弹出层状态
const drawerValue = (data: boolean) => {
  changedrawer.value = data
}
//table表格传过来的参数
const tableValue = (data: boolean,obj?: any) => {
  someData.value = obj
  changedrawer.value = data
}
</script>

<template>
  <div id="functiontable">
    <div class="table">
      <!-- table表格 传入数据 接收状态-->
      <componentstable @gettableValue="tableValue" :tabletitle="tabletitle"></componentstable>
    </div>
    <div class="drawer" v-if="changedrawer">
      <!-- 弹出层 传入数据 接收状态-->
      <component :sondata="someData" @getdrawerValue="drawerValue" :is="tabs![componentname as keyof typeof tabs]"></component>
    </div>
  </div>
</template>

<style lang='scss' scoped>
#functiontable {
  display: flex;
  width: 100%;
  height: 100%;
  .table{
    flex: 1;
    padding: 30px 20px 0;
    background-color: #fff;
  }
  .drawer{
    background-color: #fff;
    padding: 20px 20px 0;
    margin-left: 10px;
    min-width: 400px;
  }
}
</style>
